// 颜色
@color-primary: #3498db;
@color-text: #2c3e50;
@color-text-muted: #6c757d;
@color-label: #7f8c8d;
@color-bg: #f5f5f5;
@color-card-border: #f0f0f0;
@color-border: #e9ecef;
@color-border-strong: #ecf0f1;
@color-hover-bg: #e3f2fd;

// 尺寸/间距/圆角/阴影
@radius-card: 16rpx;
@radius-btn: 10rpx;
@shadow-card: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
@page-padding: 16rpx;
@card-padding: 20rpx;
@block-gap: 20rpx;

// 字体
@title-size: 32rpx;
@label-size: 28rpx;
@value-size: 32rpx;
@btn-font: 30rpx;

// 按钮尺寸
@btn-size: 80rpx;

// 复用样式
.card() {
    background: #fff;
    border-radius: @radius-card;
    padding: @card-padding;
    box-shadow: @shadow-card;
    border: 1rpx solid @color-card-border;
}

.sectionTitle() {
    color: @color-text;
    margin-bottom: @block-gap;
    font-size: @title-size;
    font-weight: 600;
    text-align: center;
    padding: 10rpx 0;
    border-bottom: 2rpx solid @color-border-strong;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        bottom: -2rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 3rpx;
        background: @color-primary;
        border-radius: 2rpx;
    }
}

.btnBase() {
    width: @btn-size;
    height: @btn-size;
    border-radius: @radius-btn;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1rpx solid @color-border;
    color: @color-text-muted;
    font-size: @btn-font;
    font-weight: 500;
    margin-left: 20rpx;
    margin-top: 20rpx;
}

.btnHover() {
    background: @color-hover-bg;
    border-color: @color-primary;
    color: @color-primary;
}

.btnActive() {
    background: @color-primary;
    color: #fff;
    border-color: @color-primary;
    box-shadow: 0 2rpx 8rpx rgba(52, 152, 219, 0.3);
}

.resultItem() {
    background: #fff;
    border-radius: 12rpx;
    border: 1rpx solid @color-border-strong;
    padding: 20rpx;

    .info-label {
        font-size: @label-size;
        color: @color-label;
        margin-bottom: 12rpx;
        font-weight: 500;
    }

    .info-value {
        font-size: @value-size;
        font-weight: 600;
        color: @color-text;
    }
}

// 页面容器（统一居中90%宽）
.pageContent() {
    width: 90%;
    margin: 0 auto;
}